¿Cómo diseñarías formularios complejos en Vue para mantener validación, accesibilidad, rendimiento y contratos claros de `v-model`?

Respuesta

• Divide el formulario entre componentes de campo con contrato claro y una capa de composición que orqueste reglas, envío y navegación del usuario.
• Mantén la validación de dominio separada de la puramente visual para que el mismo criterio pueda reutilizarse y probarse sin depender del render.
• Gestiona foco, estados pendientes, mensajes y dependencias entre campos como parte del diseño, no como parches al final.

Puntos clave

• Los formularios grandes escalan mejor cuando separas componentes de campo, reglas de validación, transformación de datos y envío.
• Un buen contrato de v-model deja claro qué valor entra, qué evento sale y cómo se representan error, pendiente y estado deshabilitado.
• Accesibilidad y rendimiento no son extras: foco, mensajes asociados, validación asíncrona y renders contenidos forman parte del diseño del formulario.

Errores comunes

• Mezclar reglas visuales, validación de dominio y transporte en el mismo componente vuelve el formulario rígido y difícil de probar.
• Un contrato débil de v-model o mensajes mal conectados rompe tanto UX como accesibilidad.

Ejemplo de código

<script setup lang="ts">
const model = defineModel<string>({ required: true });
const props = defineProps<{ error?: string; label: string }>();
</script>

<template>
  <label>
    <span>{{ props.label }}</span>
    <input v-model="model" :aria-invalid="Boolean(props.error)" />
  </label>
  <p v-if="props.error" role="alert">{{ props.error }}</p>
</template>

Ejemplo o caso real

Se vuelve evidente en formularios largos o multi-step donde los errores, validaciones y dependencias entre campos dejan de ser triviales.

Idea clave

Un formulario bien diseñado guía al usuario y al equipo al mismo tiempo.